<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="/webjars/adminlte/2.3.11/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/webjars/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/webjars/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/webjars/adminlte/2.3.11/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="/webjars/adminlte/2.3.11/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="/public/css/login.css" />
<script src="/webjars/adminlte/2.3.11/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/public/js/login/EasePack.min.js"></script>
<script src="/public/js/login/rAF.js"></script>
<script src="/public/js/login/TweenLite.min.js"></script>

<head>
    <meta charset="utf-8">

    <head>
        <title>智慧物联平台</title>

    </head>

    <body id="large-header">
        <div id="owr" class="loginStyle">
            <!-- <canvas id="demo-canvas" ></canvas> -->
            <div class="login-box-bg">

                <div class="login-box-main">
                    <div>
                        <div class="login-logo" style="background:none;"></div>
                        <div class="login-welcome" style="font-size:24px;">
                            <br/> 欢迎登录智慧物联平台
                        </div>
                        <div style="display:none;">
                            <div class="login-logo"></div>
                            <div class="login-welcome">
                                <br/> 欢迎登录中乂物联智慧消防平台
                            </div>
                        </div>
                        <div class="login-tip">
                            <div th:if="${param.error}">
                                用户名或密码错误
                            </div>
                            <div th:if="${param.logout}">
                                您已注销成功
                            </div>
                        </div>
                        <form th:action="@{/login}" method="post">
                            <div class="form-group has-feedback">
                                <!--  <input type="hidden" 
       th:name="${_csrf.parameterName}" 
       th:value="${_csrf.token}" /> -->
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                <input id="username" type="text" class="form-control" name="username" placeholder="请输入登录账号" th:value=${username} th:attr="auto=${auto}"
                                    autocomplete="new-password">
                            </div>
                            <div class="form-group has-feedback">
                                <input id="password" type="password" class="form-control" name="password" placeholder="请输入登录密码" th:value=${password} autocomplete="new-password"
                                    th:attr="auto=${auto}" spellcheck="false">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="login-row" style="visibility: hidden">
                                <input type="checkbox" name="remember-me" /> 记住密码
                            </div>
                            <div class="login-row">
                                <button id="loginbtn" type="submit" class="btn bg-aqua btn-block btn-flat btnLogin">登&nbsp;录</button>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="login-word">

                </div>
            </div>
            <div class="edition">
                <p>©2018 浙江中乂物联科技有限公司 版权所有</p>
                <p>浙江ICP备17056228号</p>
            </div>
        </div>


        <script>
            $("#owr").hide();
            (function () {
                //
                /*     $("#username").val("admin");
                    $("#password").val("1234567"); */


                var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

                var auto = $("#username").attr("auto");
                if (auto == "true") {
                    $("#owr").hide();
                    $("#loginbtn").click();
                    setTimeout(function () {
                        var webhost = location.hostname.toLowerCase();
                        if (webhost.indexOf("com") >= 0) {
                            window.location = "http://" + webhost + "/";

                        } else {
                            window.location = "http://" + webhost + ":9092/";
                        }
                    }, 500)
                } else {
                    $("body").addClass("login-body");
                    $("#owr").show();
                }


                //Main
                //initHeader();
                //initAnimation();
                //addListeners();



                function initHeader() {
                    width = window.innerWidth;
                    height = window.innerHeight;
                    target = {
                        x: width / 2,
                        y: height / 2
                    };

                    largeHeader = document.getElementById('large-header');
                    largeHeader.style.height = height + 'px';

                    canvas = document.getElementById('demo-canvas');
                    canvas.width = width;
                    canvas.height = height;
                    ctx = canvas.getContext('2d');

                    // create points
                    points = [];
                    for (var x = 0; x < width; x = x + width / 20) {
                        for (var y = 0; y < height; y = y + height / 20) {
                            var px = x + Math.random() * width / 20;
                            var py = y + Math.random() * height / 20;
                            var p = {
                                x: px,
                                originX: px,
                                y: py,
                                originY: py
                            };
                            points.push(p);
                        }
                    }

                    // for each point find the 5 closest points
                    for (var i = 0; i < points.length; i++) {
                        var closest = [];
                        var p1 = points[i];
                        for (var j = 0; j < points.length; j++) {
                            var p2 = points[j]
                            if (!(p1 == p2)) {
                                var placed = false;
                                for (var k = 0; k < 5; k++) {
                                    if (!placed) {
                                        if (closest[k] == undefined) {
                                            closest[k] = p2;
                                            placed = true;
                                        }
                                    }
                                }

                                for (var k = 0; k < 5; k++) {
                                    if (!placed) {
                                        if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                            closest[k] = p2;
                                            placed = true;
                                        }
                                    }
                                }
                            }
                        }
                        p1.closest = closest;
                    }

                    // assign a circle to each point
                    for (var i in points) {
                        var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
                        points[i].circle = c;
                    }
                }

                // Event handling
                function addListeners() {
                    if (!('ontouchstart' in window)) {
                        window.addEventListener('mousemove', mouseMove);
                    }
                    window.addEventListener('scroll', scrollCheck);
                    window.addEventListener('resize', resize);
                }

                function mouseMove(e) {
                    var posx = posy = 0;
                    if (e.pageX || e.pageY) {
                        posx = e.pageX;
                        posy = e.pageY;
                    } else if (e.clientX || e.clientY) {
                        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                    }
                    target.x = posx;
                    target.y = posy;
                }

                function scrollCheck() {
                    if (document.body.scrollTop > height) animateHeader = false;
                    else animateHeader = true;
                }

                function resize() {
                    width = (window.innerWidth) / 2;
                    height = window.innerHeight;
                    largeHeader.style.height = height + 'px';
                    canvas.width = width;
                    canvas.height = height;
                }

                // animation
                function initAnimation() {
                    //animate();
                    for (var i in points) {
                        shiftPoint(points[i]);
                    }
                }

                function animate() {
                    if (animateHeader) {
                        ctx.clearRect(0, 0, width, height);
                        for (var i in points) {
                            // detect points in range
                            if (Math.abs(getDistance(target, points[i])) < 4000) {
                                points[i].active = 0.3;
                                points[i].circle.active = 0.6;
                            } else if (Math.abs(getDistance(target, points[i])) < 20000) {
                                points[i].active = 0.1;
                                points[i].circle.active = 0.3;
                            } else if (Math.abs(getDistance(target, points[i])) < 40000) {
                                points[i].active = 0.02;
                                points[i].circle.active = 0.1;
                            } else {
                                points[i].active = 0;
                                points[i].circle.active = 0;
                            }

                            drawLines(points[i]);
                            points[i].circle.draw();
                        }
                    }
                    requestAnimationFrame(animate);
                }

                function shiftPoint(p) {
                    TweenLite.to(p, 1 + 1 * Math.random(), {
                        x: p.originX - 50 + Math.random() * 100,
                        y: p.originY - 50 + Math.random() * 100,
                        ease: Circ.easeInOut,
                        onComplete: function () {
                            shiftPoint(p);
                        }
                    });
                }

                // Canvas manipulation
                function drawLines(p) {
                    if (!p.active) return;
                    for (var i in p.closest) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p.closest[i].x, p.closest[i].y);
                        ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
                        ctx.stroke();
                    }
                }

                function Circle(pos, rad, color) {
                    var _this = this;

                    // constructor
                    (function () {
                        _this.pos = pos || null;
                        _this.radius = rad || null;
                        _this.color = color || null;
                    })();

                    this.draw = function () {
                        if (!_this.active) return;
                        ctx.beginPath();
                        ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
                        ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')';
                        ctx.fill();
                    };
                }

                // Util
                function getDistance(p1, p2) {
                    return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
                }


            })();
        </script>
    </body>

</html>